<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>登录</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="robots" content="all,follow">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">



</head>
<body>
<div class="page login-page">
  <div class="container d-flex align-items-center">
    <div class="form-holder has-shadow">
      <div class="row">
        <!-- Logo & Information Panel-->
        <div class="col-lg-6">
          <div class="info d-flex align-items-center">
            <div class="content">
              <div class="logo">
                <h1>欢迎登录</h1>
              </div>
            </div>
          </div>
        </div>
        <!-- Form Panel    -->
        <div class="col-lg-6 bg-white">
          <div class="form d-flex align-items-center">
            <div class="content">
              <form method="post" action=""  id="loginFrom">
                <div class="form-group">
                  <input id="login-username" type="text" name="username" required data-msg="请输入用户名" placeholder="请输入用户名"  class="input-material">
                </div>
                <div class="form-group">
                  <input id="login-password" type="password" name="password" required data-msg="请输入密码" placeholder="请输入密码" class="input-material">
                </div>

<!--                &lt;!&ndash; 验证码 &ndash;&gt;-->
<!--                <div class="form-group">-->
<!--                  <input name="check" class="input-material" type="text" placeholder="请输入验证码" autocomplete="off">-->
<!--                  <span>-->
<!--						<img src="checkCode" alt="" onclick="changeCheckCode(this)">-->
<!--					</span>-->
<!--                </div>-->
<!--                <script type="text/javascript">-->
<!--                  //图片点击事件-->
<!--                  function changeCheckCode(img) {-->
<!--                    img.src="checkCode?"+new Date().getTime();-->
<!--                  }-->
<!--                </script>-->

                <button id="login_btn" type="button" class="btn btn-primary">登录</button>

              </form>
              <br />
              <small>没有账号?</small><a href="register.html" class="signup">&nbsp;注册</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- JavaScript files-->
<script src="js/jquery-3.3.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="vendor/jquery-validation/jquery.validate.min.js"></script>
<script src="js/front.js"></script>
<script>
  $(function(){
    $("#login_btn").click(function(){
      $.post("userLogin",{username:$("#login-username").val(),password:$("#login-password").val()},function (data) {
        //这是请求完成后的回调函数
        //返回的数据为json数据格式为  data：{flag：true or false,errorMsg:错误提示信息}
        if(data.flag){
          //用户存在，可以登录
          alert("登录成功");
          location = "main.html";
        }else{
          //用户不存在，无法登录
          alert(data.errorMsg);
          location = "index.html";
        }
      },"json");
    })
  })
</script>
</body>
</html>